<template>
  <div class="c1">
    <div class="c2">
      <div class="mt-4">
        <!-- 搜索框-->
        <el-input
            v-model="job.jobName"
            placeholder="请输入职位或公司名"
            class="input-with-select"
            style="height: 54px">
          <template #append>
            <el-button @click="jobSearch()">搜索</el-button>
          </template>
        </el-input>
      </div>
      <el-icon style=".job-search-box .job-search-scan::before {
      position: absolute;
      top: 4px;
      left: 145px;
      width: 22px;
      height: 32px;
      background: url(https://img.bosszhipin.com/static/file/2022/bh2amn80el1654691091224.png) 0 0/44px auto no-repeat;
      }"></el-icon>
      <div style="float: right;overflow: hidden;">

        <span style="font-size: 12px;color: #00bebd ;font-weight: bold">请前往手机端APP</span>
        <br>
        <span style="font-weight:bold;font-size: 12px;color: #00bebd ;">与BOSS联系</span>
      </div>

      <!--  城市区域-->
      <br>
      <br>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect">
        <el-menu-item index="1">城市区域</el-menu-item>
      </el-menu>
      <div>
        <el-button v-for="item in cityArr"
                   style="font-size: 16px"
                   @click="city(item.parentId)">
          {{ item.name }}
        </el-button>
      </div>
      <hr>


      <div>
        <el-button v-for="sub in subArr"
                   style="font-size: 16px">
          {{ sub.name }}
        </el-button>
      </div>
      <hr>

      <!-- 标签栏-->
      <el-form :model="key" label-width="100px" style="width: 600px" >
        <div style="display: inline;float: left">
          <el-form-item label="求职类型" >
            <el-select v-model="key.jobType">
              <el-col :span="6">
                <el-option label="不限" value="不限"/>
                <el-option label="兼职" value="兼职"/>
                <el-option label="全职" value="全职"/>
              </el-col>
            </el-select>
          </el-form-item>
        </div>



        <div style="display: inline;margin: 5px;float: left">
          <el-form-item label="经验和学历:" >
            <el-col :span="6">
              <el-select v-model="key.experience" >
                <el-option label="不限" value="不限" />
                <el-option label="在校生" value="在校生" />
                <el-option label="应届生" value="应届生" />
                <el-option label="1年以内" value="1年以内" />
                <el-option label="1-3年" value="1-3年" />
                <el-option label="3-5年" value="3-5年" />
                <el-option label="5-10年" value="5-10年" />
                <el-option label="10年以上" value="10年以上" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="key.degree" >
                <el-option label="不限" value="不限" />
                <el-option label="初中及以下" value="初中及以下" />
                <el-option label="中专/中技" value="中专/中技" />
                <el-option label="高中" value="高中" />
                <el-option label="大专" value="大专" />
                <el-option label="本科" value="本科" />
                <el-option label="硕士" value="硕士" />
                <el-option label="博士" value="博士" />
              </el-select>
            </el-col>
          </el-form-item>
        </div>

        <el-col :span="6">
          <el-form-item label="薪资范围:" style="width: 20px">
            <el-select v-model="key.salary" style="display: inline;">
              <el-option label="不限" value="不限" />
              <el-option label="1-3K" value="1-3K" />
              <el-option label="3-5K" value="3-5K" />
              <el-option label="5-10K" value="5-10K" />
              <el-option label="10-20K" value="10-20K" />
              <el-option label="20-50K" value="20-50K" />
              <el-option label="50K以上" value="50K以上" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-form>
      <el-button @click="searchKey()">提交关键字</el-button>

    <div class="box" v-for="i in listArr">
      <el-card shadow="hover">
        <el-row :gutter="24">
          <el-col :span="10">
            <span class="row1">{{ i.title }}</span>
            <span class="row1">{{i.comapnyPositon}}</span>
          </el-col>

          <el-col :span="7">
            <div class="demo-type">
              <el-avatar :size="80" src="https://empty" @error="errorHandler">
                <img src={{i.companyPicUrl}}/>
              </el-avatar>
            </div>
          </el-col>

          <el-col :span="7">
            <span style="margin: 10px">{{i.companyName}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="6">
            <span style="font-size: 18px;color: red;margin: 5px ;float: left;text-align: center">{{i.salary}}</span>
            <span style="font-size: 14px; margin: 7px;float: left;text-align: center">{{i.experience}}</span>
            <span style="font-size: 14px; margin: 7px;float: left;text-align: center">{{i.degree}}}</span>
          </el-col>

        </el-row>


      </el-card>
    </div>


  </div>
  </div>
</template>

<script setup>

import {onMounted, popScopeId, ref} from 'vue'
import axios from "axios";


const input3 = ref('')
const select = ref('')
const cityArr = ref([{name: "北京", parentId: 1},
  {name: "天津", parentId: 2},
  {name: "上海", parentId: 3},

  {
    name: "重庆", parentId: 3
  },
  {
    name: "河北", parentId: 4
  },
  {
    name: "山西", parentId: 5
  },
  {
    name: "内蒙古", parentId: 6
  },
  {
    name: "辽宁", parentId: 7
  },
  {
    name: "吉林", parentId: 8
  },
  {
    name: "黑龙江", parentId: 9
  },
  {
    name: "江苏", parentId: 10
  },
  {
    name: "浙江", parentId: 11
  },
  {
    name: "安徽", parentId: 12
  },
  {
    name: "福建", parentId: 13
  },
  {name: "其他城市"}
])
const subArr = ref([]);
const id = ref({parentId: ''});
const job=ref({jobName:''},{pageNum:1},{pageSize : 10})
const key = ref({
title:'',
companyPosition: '',
jobType: '',
degree: '',
experience: '',
salary: ''},
    )
const listArr = ref([]);
const city = (pid) => {
  id.value.parentId = pid;
  axios.get("http://localhost:4000/dict/district/list-by-parent/" + id.value.parentId).then((response) => {
    if (response.data.state == 20000) {
      subArr.value = response.data.data;
      console.log(response.data.data);
    }
  })
}
const searchKey = () => {
  console.log(key.value);
  axios.get("http://localhost:4000/search/jobList/"+key.value).then((response)=>{
    if (response.data.state==20000){
      listArr.value=response.data.data;
      console.log(response.data.data);

    }
  })
}
const jobSearch=()=>{

  console.log(job.value);
  axios.get("http://localhost:4000/search/job",{  params: { jobName: job.value.jobName, pageNum: 1, pageSize: 10 }}).then((response)=>{
if (response.data.state==20000){
  listArr.value=response.data.data;
  console.log(response.data.data);
}
      }

  )}
onMounted(() => {
  city(1);
})

</script>

<style scoped>
.demo-type {
  float: right;
}

.row1 {
  padding: 5px;
  font-size: 18px;
}

.c1 {

  position: relative;
  width: 100%;
  height: 1200px;
  background-color: powderblue;
}

.c2 {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 1200px;
  height: 500px;
  background-color: white;
  margin: 20px auto;
  padding: 50px;
  border-radius: 12px;
}

.mt-4 {
  position: relative;
  float: left;
  border: 2px solid #00bebd;
  margin: 1px 20px;
  width: 880px;
  height: 54px;
}

.box {
  position: relative;
  top: 500px;
  left: 20px;
  float: left;
  background-color: white;
  width: 1200px;
  height: 500px;
  margin: 20px auto;
  padding: 50px;
  border-radius: 12px;


}

.b1 {
  position: relative;
  color: #00bebd;
  font-size: 16px;
  font-weight: 500;
  float: left;
  cursor: pointer;
  padding-bottom: 6px;
  padding-left: 20px;

}

.input-with-select {
  background-color: var(--el-fill-color-blank);
}
</style>